<template>
  <div>
    <TableList
      ref="TableList"
      request-url="system/carouselImage/list"
      request-method="get"
      :table-column="tableColumn"
      :has-search="false"
    >
      <template #image="{ item, row }">
        <div class="demo-image__preview">
          <el-image
            style="width: 50px; height: 50px"
            :src="row[item]"
            :preview-src-list="[row[item]]"
          />
        </div>
      </template>

      <template #btns>
        <el-button size="small" type="primary" @click="modalShow=true">新增</el-button>
      </template>

      <template #operate="{ item, row }">
        <DeleteButton @delete-item="deleteItem(row)" />
      </template>

    </TableList>

    <el-dialog
      title="新增轮播图"
      :visible.sync="modalShow"
      width="50%"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="轮播图" prop="image" :rules="{ required: true, message: '上传图片'}" label-width="120px">
          <ImageUpload v-model="form.image" :limit="1" />
        </el-form-item>
        <el-form-item>
          <el-button :loading="loading" type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="modalShow=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import TableList from '@/components/TableList'
import request from '@/utils/request'

export default {
  components: { TableList },
  data() {
    return {
      modalShow: false,
      loading: false,
      form: {},
      tableColumn: [
        {
          prop: 'id',
          label: '编号'
        },
        {
          prop: 'image',
          label: '图片'
        },
        {
          prop: 'createTime',
          label: '创建时间'
        }, {
          prop: 'operate',
          label: '操作',
          width: '180'
        }
      ]
    }
  },
  methods: {
    deleteItem(row) {
      request({ url: 'system/carouselImage/' + row.id, method: 'delete' }).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.$refs['TableList'].requestData()
        } else {
          this.$message({
            message: '删除失败',
            type: 'warning'
          })
        }
      })
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.request(this.form)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    async request(params) {
      try {
        this.loading = true
        await request({
          url: 'system/carouselImage',
          method: 'post',
          data: params
        })
        this.$message({
          message: '创建成功',
          type: 'success',
          duration: 2000,
          onClose: () => {
            this.modalShow = false
            this.$refs['form'].resetFields()
            this.$refs.TableList?.requestData()
          }
        })
      } catch (error) {
        this.$message({
          message: error,
          type: 'warning'
        })
      } finally {
        this.loading = false
      }
      //
    }
  }
}
</script>
